<template>
	<div id="home">
		<header class="index_header">
			
			<div class="hlist">
				<img src="../assets/images/rexiao.png"/>
				<p>热销榜</p>				
			</div>
			
			<div class="hlist">
				<img src="../assets/images/caidan.png" />
				<p>点过的菜</p>				
			</div>
			<div class="hlist">
				
				<img src="../assets/images/sousuo.png"/>
				<p>搜你喜欢</p>				
			</div>
			
		</header>
		
		<aside class="left_cate" id="left_cate">
				<ul>
					<li v-for="(item,key) in list" @click="changeList(key)">{{item.title}}</li>

				</ul>
				
				<div id="nav_cate" class="nav_cate">
					<img src="../assets/images/nav.png"/>
					<p>菜单</p>
				</div>
				
				
		</aside>
		
		
		<div class="content">
			
			
			<div class="item"  v-for="item in list">
				
				<h3 class="item_cate">{{item.title}}</h3>
				
				<ul class="item_list">
					<li v-for="food in item.list">	
						<div class="inner">
							
							<router-link :to="'/pcontent/'+food._id">
								<img :src="api+food.img_url" />
								<p class="title">{{food.title}}</p>						
								<p class="price">¥{{food.price}}</p>
							</router-link>
						</div>		
					</li>
					
				</ul>
				
			</div>
			
			
		</div>
		
		<div class="bg" id="bg">
			
			
		</div>
		
		<v-footernav></v-footernav>
		
		
		<div id="footer_cart" class="footer_cart">
			<router-link to="/cart">
			<span class="num" v-if="cartNum">{{cartNum}}</span>
			<img src="../assets/images/cart.png"/>
			<p>购物车</p>
			</router-link>
		</div>
		
		
	</div>
</template>
<script>
//引入组件
import FooterNav from './public/FooterNav.vue';
//引入公共配置文件
import Config from '../model/config.js';
export default {
	name: 'app',
		data () {
		    return {
		    	list:[],
		    	api:Config.host,
		    	cartNum:0
		    }
		},
		methods:{
			asideDlg(){
				//点击菜单出来右侧分类
				//按钮
			  		var navCate=document.getElementById('nav_cate');
			  		//分类
			  		var leftCate=document.getElementById('left_cate');
			  		
			  		//背景			  		
			  		var bg=document.getElementById('bg');			  		
			  		
			  		var flag=true;
			  		
			  		bg.onclick=navCate.onclick=function(){
			  			
			  			if(flag){
			  				
			  				flag=false;
			  				leftCate.style.transform='translate(0,0)';
			  				
			  				bg.style.display='block';
			  				
			  			}else{	
			  				
			  				flag=true;
			  				leftCate.style.transform='translate(-100%,0)';
			  				
			  				bg.style.display='none';
			  			}
			  			
			  		}
			},
			changeList(key){
					//左侧菜单右侧分类滑动
				
				/*var item_cates=document.querySelectorAll('.item_cate');
				document.documentElement.scrollTop=item_cates[key].offsetTop;*/
				
				var itemCatesDom=document.querySelectorAll('.item_cate');
				var roll = document.body || document.documentElement;
				
				
                roll.scrollTop=itemCatesDom[key].offsetTop;
                 console.log(itemCatesDom[key]);
               console.log("----"+roll);
             		
				
			},
			requestData(){
				//菜单列表请求数据
				
				var api=this.api+"api/productlist";
				this.$http.get(api).then(response => {

				  
				  this.list=response.body.result
				
				  }, response => {
				    // error callback
				  });
			},
			getCartNum(){
				//购物车数量请求数据
				var api=this.api+'api/cartCount?uid=a001';
				
                this.$http.get(api).then((response)=>{

                    this.cartNum=response.body.result

                    /*this.cartNum=response.body.result;*/

                },(err)=>{

                    console.log(err);
                })
				
			}
		},
		mounted(){
			/*点击菜单*/
			this.asideDlg();
			/*请求菜单列表数据*/
			this.requestData();
			/*获取购物车数量*/
			this.getCartNum();
			
			
		},
		components:{
			'v-footernav':FooterNav
		}

}
</script>
<style lang="scss">

.index_header{
    
    width: 96%;
    
    margin: 0 auto;
    
    height: 4.4rem;
    
    
    background: #fff;
    margin-top:1rem;
    
    display: flex;
    border-radius: .5rem;
    
    .hlist{
        
        flex: 1;
        text-align: center;
        padding-top: .2rem;
        border-right: 1px solid #eee;
        
        img{
            width: 2rem;
            height: 2rem;
            margin: 0 auto;
        }
        
        &:last-child{
            
            border-right: none;
        }
    }
    
    
}

/*列表*/
.item{
    
    .item_cate{
        text-align: center;
        
        padding: .5rem;
    }
    
    .item_list{
        
        display: flex;
        
        flex-wrap: wrap;
        
        padding: 0px .5rem;
        
        li{
            width: 33.3%;
            padding: .5rem;
            
            box-sizing: border-box;
            
                  
            .inner{
                
                background: #fff;                
                width: 100%;
                 border-radius: .5rem;    
                 overflow: hidden; 
                 a{
                 	text-decoration: none;
                 	color:#666;
                 }
                img{
                    width: 100%;
                    height:10rem;
                }
                p{
                    
                    padding: .2rem .5rem;
                    
                }
                
                .title{
                    
                    font-weight: bold;
                }
                
                
            }
        }
    }
}



/*侧边栏*/


.left_cate{
    
    /*css3运动  加过渡效果*/   
    transition: all 1s;
    
    transform: translate(-100%,0);
    
    z-index: 2;
    
    
    
    width: 6rem;
    
    height: 100%;
    
    position: fixed;
    
    background: #eee;
    top:0px;
    left: 0px;
    
    ul{
        position: absolute;
        
        height: 100%;
        padding: .5rem;
        
        z-index: 3;
        
        background: #eee;
        li{
            
            line-height: 4.4rem;
        }
    }
    
    
    
    .nav_cate{
        
        position: absolute;
        
        right: -3.5rem;
        
        background: rgba(132, 128, 128, 0.9);
        top:42%;
        
        width: 5rem;
        
        height: 4rem;
        text-align: center;
        
        border-radius: 0rem 50% 50% 0rem;
        
         z-index: 2;
        img{
            
            width: 1.8rem;
            
            height: 1.8rem;
            
            margin-left: 1rem;
            
            margin-top: .4rem;
            
        }
        p{
            color: #fff;
            margin-left: 1rem;
            
            margin-top:-0.3rem
        }
    }
}


/*透明层*/

.bg{
    
    position: fixed;
    
    width: 100%;
    height: 100%;
    
    background: rgba(132, 128, 128, 0.4);
    
    left: 0px;
    
    top:0px;
    z-index: 1;
    
    display: none;
    
    
}


</style>